<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <!-- Favicons -->
    

    <!-- Vendor CSS (Icon Font) -->

    <link rel="stylesheet" href="front/css/fontawesome.min.css">
    <link rel="stylesheet" href="front/css/pe-icon-7-stroke.min.css">


    <!-- Plugins CSS (All Plugins Files) -->


    <link rel="stylesheet" href="front/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="front/css/animate.min.css">
    <link rel="stylesheet" href="front/css/lightgallery.min.css">
    <link rel="stylesheet" href="front/css/aos.min.css">
    <link rel="stylesheet" href="front/css/nice-select.min.css">


    <!-- Main Style CSS -->
    <link rel="stylesheet" href="front/css/style.css">


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->

    <!--
<link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
<link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
<link rel="stylesheet" href="assets/css/style.min.css"> 
-->
</head>

<body>


    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Top Start -->
        <div class="header-top bg-primary">
            <div class="container">
                <div class="row align-items-center">

                    <!-- Header Top Message Start -->
                    <div class="col-12">
                        <div class="header-top-msg-wrapper text-center">
                            <p class="header-top-message text-center">最高50%折扣 <strong>冬季</strong> 系列 <a href="page/shoppage" class="btn btn-hover-dark btn-secondary">立即购买</a></p>
                            <div class="header-top-close-btn">
                                <button class="top-close-btn"><i class="pe-7s-close"></i></button>
                            </div>
                        </div>
                    </div>
                    <!-- Header Top Message End -->
                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- Header Logo Start -->
                        <div class="col-md-6 col-lg-3 col-xl-2 col-6">
                            <div class="header-logo">
                                <a href="page/shoppage"><img src="front/picture/logo.png" alt="Site Logo"></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-lg-6 d-none d-lg-block">

                            <div class="main-menu">
                                <ul>
                                    <li class="has-children">
                                        <a href="page/index">首页</a>
                                    </li>
                                    <li class="has-children position-static">
                                        <a href="page/shoppage">购物 <i class="fa fa-angle-down"></i></a>
                                        <ul class="mega-menu row" id="categorylist">
                                            <li class="col-3">
                                                <h4 class="mega-menu-title">商品</h4>
                                                <ul class="mb-n2">
                                                    <li><a href="page/shoppage">全部商品</a></li>
                                                </ul>
                                            </li>

                                        </ul>
                                    </li>
                                    <li><a href="page/about">关于我们</a></li>
                                    <li><a href="page/contact">联系我们</a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-md-6 col-lg-3 col-xl-4 col-6 justify-content-end">
                            <div class="header-actions">
                                <form action="/search" method="GET" id="search-form">
                                    <input type="text" name="q" placeholder="搜索..." required>
                                </form>
                                <div class="dropdown-user d-none d-lg-block">
                                    <a href="page/account" class="header-action-btn"><i class="pe-7s-user"></i></a>
                                </div>
                                <a href="page/wishlist" class="header-action-btn header-action-btn-wishlist">
                                    <i class="pe-7s-like"></i>
                                </a>
                                <a href="page/cart" class="header-action-btn header-action-btn-cart">
                                    <i class="pe-7s-cart"></i>
                                </a>
                                <!-- Mobile Menu Hambarger Action Button Start -->
                                <a href="javascript:void(0)" class="header-action-btn header-action-btn-menu d-lg-none d-md-block">
                                    <i class="fa fa-bars"></i>
                                </a>
                                <!-- Mobile Menu Hambarger Action Button End -->

                            </div>
                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

        <!-- Offcanvas Search Start -->
        <div class="offcanvas-search">
            <div class="offcanvas-search-inner">

                <!-- Button Close Start -->
                <div class="offcanvas-btn-close">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Offcanvas Search Form Start -->
                <form class="offcanvas-search-form" action="#">
                    <input type="text" placeholder="Search Product..." class="offcanvas-search-input">
                </form>
                <!-- Offcanvas Search Form End -->

            </div>
        </div>
        <!-- Offcanvas Search End -->

    </div>
    <!-- Header Section End -->

    <!-- Hero/Intro Slider Start -->
    <div class="section">
        <div class="hero-slider swiper-container">
            <div class="swiper-wrapper">

                <div class="hero-slide-item swiper-slide">
                    <div class="hero-slide-bg">
                        <img src="front/picture/slider1-1.png" alt="Slider Image">
                    </div>
                    <div class="container">
                        <div class="hero-slide-content">
                            <h2 class="title m-0">30% 折扣</h2>
                            <p>最新 婴儿产品&玩具系列</p>
                            <a href="page/shoppage" class="btn btn-primary btn-hover-light">立即购买</a>
                        </div>
                    </div>
                </div>

                <div class="hero-slide-item swiper-slide">
                    <div class="hero-slide-bg">
                        <img src="front/picture/slider1-2.png" alt="Slider Image">
                    </div>
                    <div class="container">
                        <div class="hero-slide-content">
                            <h2 class="title m-0"> 新到货 <br>低至5折优惠 </h2>
                            <a href="page/shoppage" class="btn btn-primary btn-hover-light">立即购买</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Swiper Pagination Start -->
            <div class="swiper-pagination d-lg-none"></div>
            <!-- Swiper Pagination End -->

            <!-- Swiper Navigation Start -->
            <div class="home-slider-prev swiper-button-prev main-slider-nav d-lg-flex d-none"><i class="pe-7s-angle-left"></i></div>
            <div class="home-slider-next swiper-button-next main-slider-nav d-lg-flex d-none"><i class="pe-7s-angle-right"></i></div>
            <!-- Swiper Navigation End -->
        </div>
    </div>
    <!-- Hero/Intro Slider End -->

    <!-- Banner Section Start -->
    <div class="section section-margin">
        <div class="container">
            <!-- Banners Start -->
            <div class="row mb-n6">

                <!-- Banner Start -->
                <div class="col-md-6 col-12 mb-6 pe-lg-2 pe-md-3">
                    <a href="page/shoppage" class="banner" data-aos="fade-up" data-aos-delay="200">
                        <img src="front/picture/11.png" alt="Banner Image">
                    </a>
                </div>
                <!-- Banner End -->

                <!-- Banner Start -->
                <div class="col-md-6 col-12 mb-6 ps-lg-2 ps-md-3">
                    <a href="page/shoppage" class="banner" data-aos="fade-up" data-aos-delay="400">
                        <img src="front/picture/21.png" alt="Banner Image">
                    </a>
                </div>
                <!-- Banner End -->

            </div>
            <!-- Banners End -->
        </div>
    </div>
    <!-- Banner Section End -->

    <!-- Product Section Start -->
    <div class="section section-margin mt-0 position-relative">
        <div class="container">
            <!-- Section Title & Tab Start -->
            <div class="row mb-lg-8 mb-6">
                <!-- Section Title Start -->
                <div class="col-lg col-12">
                    <div class="section-title mb-0 text-center" data-aos="fade-up" data-aos-delay="200">
                        <h2 class="title mb-2">精选收藏</h2>
                        <p>Add featured products to weekly lineup</p>
                    </div>
                </div>
                <!-- Section Title End -->

            </div>
            <!-- Section Title & Tab End -->

            <!-- Products Tab Start -->
            <div class="row">
                <div class="col" data-aos="fade-up" data-aos-delay="600">
                    <div class="product-carousel arrow-outside-container">
                        <div class="swiper-container">
                            <div class="swiper-wrapper" id="productlist">
                                <!-- Product Start -->

                                <!-- Product End -->


                            </div>

                            <div class="swiper-pagination d-block d-md-none"></div>
                            <div class="swiper-button-prev swiper-nav-button d-none d-md-flex"><i class="pe-7s-angle-left"></i></div>
                            <div class="swiper-button-next swiper-nav-button d-none d-md-flex"><i class="pe-7s-angle-right"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Products Tab End -->
        </div>
    </div>
    <!-- Product Section End -->

    <!-- Testimonial Section Start -->
    <div class="section testimonial-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- Section Title Start -->
                    <div class="section-title text-center" data-aos="fade-up" data-aos-delay="200">
                        <h2 class="title text-white">孩子们的话</h2>
                        <p class="sub-title text-white">他们说了什么</p>
                    </div>
                    <!-- Section Title End -->

                    <!-- Testimonial Carousel Start -->
                    <div class="testimonial-carousel" data-aos="fade-up" data-aos-delay="400">
                        <div class="swiper-container testimonial-gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="front/picture/thumb-1.png" alt="Product Image">
                                </div>
                                <div class="swiper-slide">
                                    <img src="front/picture/thumb-2.png" alt="Product Image">
                                </div>
                                <div class="swiper-slide">
                                    <img src="front/picture/thumb-3.png" alt="Product Image">
                                </div>
                                <div class="swiper-slide">
                                    <img src="front/picture/thumb-4.png" alt="Product Image">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-container testimonial-gallery-top">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <!-- Testimonial Content Start -->
                                    <div class="testimonial-content text-center">
                                        <p>我买了这个毛绒小熊，它摸起来软软的，抱着睡觉特别舒服。小熊的笑容很可爱，就像我的好朋友一样，每天都陪着我！</p>
                                        <span class="ratings justify-content-center mb-3">
												<span class="rating-wrap text-white">
													<span class="star text-warning" style="width: 80%"></span>
                                        </span>
                                        <span class="rating-num text-light">(3)</span>
                                        </span>
                                        <h4 class="testimonial-author mb-0">安娜米卡·卢西</h4>
                                    </div>
                                    <!-- Testimonial Content End -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- Testimonial Content Start -->
                                    <div class="testimonial-content text-center">
                                        <p>在这个玩具网站买了一套积木，质量特别好，拼起来很稳。还有详细的说明书，我拼出了一个超酷的城堡，太有成就感了！</p>
                                        <span class="ratings justify-content-center mb-3">
												<span class="rating-wrap text-white">
													<span class="star text-warning" style="width: 80%"></span>
                                        </span>
                                        <span class="rating-num text-light">(3)</span>
                                        </span>
                                        <h4 class="testimonial-author mb-0">迪西·尼伦</h4>
                                    </div>
                                    <!-- Testimonial Content End -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- Testimonial Content Start -->
                                    <div class="testimonial-content text-center">
                                        <p>我收到了一个会唱歌的芭比娃娃，她的裙子闪闪发光，声音也很好听。每次按下按钮，她都会唱不同的歌，我每天都和她一起玩！</p>
                                        <span class="ratings justify-content-center mb-3">
												<span class="rating-wrap text-white">
													<span class="star text-warning" style="width: 80%"></span>
                                        </span>
                                        <span class="rating-num text-light">(3)</span>
                                        </span>
                                        <h4 class="testimonial-author mb-0">克里斯蒂安·雅利安</h4>
                                    </div>
                                    <!-- Testimonial Content End -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- Testimonial Content Start -->
                                    <div class="testimonial-content text-center">
                                        <p>这个变形机器人太酷了！它可以变成汽车和飞机，而且关节很灵活，玩起来特别顺手。我每天都要和它一起冒险，超级喜欢！</p>
                                        <span class="ratings justify-content-center mb-3">
												<span class="rating-wrap text-white">
													<span class="star text-warning" style="width: 80%"></span>
                                        </span>
                                        <span class="rating-num text-light">(3)</span>
                                        </span>
                                        <h4 class="testimonial-author mb-0">吉姆斯·琼恩</h4>
                                    </div>
                                    <!-- Testimonial Content End -->
                                </div>
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button-white d-none"></div>
                            <div class="swiper-button-prev swiper-button-white d-none"></div>
                        </div>
                    </div>
                    <!-- Testimonial Carousel End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial Section End -->

    <!-- Product List Banner Section Start -->
    <div class="section section-padding">
        <div class="container">
            <div class="row mb-n6">

                <!-- Banner Start -->
                <div class="col-lg-4 col-md-12 col-12 mb-6">
                    <div class="banner" data-aos="fade-up" data-aos-delay="200">
                        <a href="page/shoppage"><img src="front/picture/31.png" alt="Banner Image"></a>
                    </div>
                </div>
                <!-- Banner End -->

                <!-- Product List Start -->
                <div class="col-lg-4 col-md-6 col-12 mb-6">

                    <!-- Product List Wrapper Start -->
                    <div class="product-list-wrapper" data-aos="fade-up" data-aos-delay="400">
                        <!-- Product List Title Start -->
                        <div class="product-list-title mb-5">
                            <h4 class="title">热卖商品</h4>
                        </div>
                        <!-- Product List Title End -->

                        <!-- Product List Carousel Start -->
                        <div class="product-list-carousel">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" id="productlist1">




                                    </div>

                                    <div class="swiper-slide"  id="productlist2">



                                    </div>
                                </div>

                                <!-- Swiper Pagination Start -->
                                <div class="swiper-pagination d-none"></div>
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-product-list-next swiper-button-next"><i class="pe-7s-angle-right"></i></div>
                                <div class="swiper-product-list-prev swiper-button-prev"><i class="pe-7s-angle-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>

                        </div>
                        <!-- Product List Carousel End -->
                    </div>
                    <!-- Product List Wrapper End -->

                </div>
                <!-- Product List End -->

                <!-- Product List Start -->
                <div class="col-lg-4 col-md-6 col-12 mb-6">

                    <!-- Product List Wrapper Start -->
                    <div class="product-list-wrapper" data-aos="fade-up" data-aos-delay="600">

                        <!-- Product List Title Start -->
                        <div class="product-list-title mb-5">
                            <h4 class="title">折扣商品</h4>
                        </div>
                        <!-- Product List Title End -->

                        <!-- Product List Carousel Start -->
                        <div class="product-list-carousel-2">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" id="productlist3">



                                    </div>

                                    <div class="swiper-slide" id="productlist4">



                                    </div>
                                </div>

                                <!-- Swiper Pagination Start -->
                                <div class="swiper-pagination d-none"></div>
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-product-list-next swiper-button-next"><i class="pe-7s-angle-right"></i></div>
                                <div class="swiper-product-list-prev swiper-button-prev"><i class="pe-7s-angle-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>

                        </div>
                        <!-- Product List Carousel End -->

                    </div>
                    <!-- Product List Wrapper End -->

                </div>
                <!-- Product List End -->

            </div>
        </div>
    </div>
    <!-- Product List Banner Section End -->


    <!-- Brand Logo Section Start -->
    <div class="section section-margin">
        <div class="container">
            <div class="border-top border-bottom">
                <div class="row">
                    <div class="col-12" data-aos="fade-up" data-aos-delay="200">
                        <!-- Brand Logo Wrapper Start -->
                        <div class="brand-logo-carousel arrow-outside-container">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">

                                    <!-- Single Brand Logo Start -->
                                    <div class="swiper-slide single-brand-logo">
                                        <a href="#"><img src="front/picture/1.png" alt="Brand Logo"></a>
                                    </div>
                                    <!-- Single Brand Logo End -->

                                    <!-- Single Brand Logo Start -->
                                    <div class="swiper-slide single-brand-logo">
                                        <a href="#"><img src="front/picture/2.png" alt="Brand Logo"></a>
                                    </div>
                                    <!-- Single Brand Logo End -->

                                    <!-- Single Brand Logo Start -->
                                    <div class="swiper-slide single-brand-logo">
                                        <a href=""><img src="front/picture/3.png" alt="Brand Logo"></a>
                                    </div>
                                    <!-- Single Brand Logo End -->

                                    <!-- Single Brand Logo Start -->
                                    <div class="swiper-slide single-brand-logo">
                                        <a href="#"><img src="front/picture/41.png" alt="Brand Logo"></a>
                                    </div>
                                    <!-- Single Brand Logo End -->

                                    <!-- Single Brand Logo Start -->
                                    <div class="swiper-slide single-brand-logo">
                                        <a href="#"><img src="front/picture/5.png" alt="Brand Logo"></a>
                                    </div>
                                    <!-- Single Brand Logo End -->

                                    <!-- Single Brand Logo Start -->
                                    <div class="swiper-slide single-brand-logo">
                                        <a href="#"><img src="front/picture/6.png" alt="Brand Logo"></a>
                                    </div>
                                    <!-- Single Brand Logo End -->

                                </div>

                                <!-- Swiper Pagination Start -->
                                <div class="swiper-pagination d-none"></div>
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-logo-button-next swiper-button-next swiper-nav-button d-none d-md-flex"><i class="pe-7s-angle-right"></i></div>
                                <div class="swiper-logo-button-prev swiper-button-prev swiper-nav-button d-none d-md-flex"><i class="pe-7s-angle-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>
                        </div>
                        <!-- Brand Logo Wrapper End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Brand Logo Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-primary section-padding">
            <div class="container">
                <div class="row mb-n8">
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">关于我们</h1>
                            <p class="desc-content">我们是一个由设计师和开发人员组成的团队，致力于创建高质量的、世界性的、惠及全人类的购物网站。</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start mb-n2">
                                <a title="Facebook" href="https://zh-cn.facebook.com/"><i class="fa fa-facebook-f"></i></a>
                                <a title="Twitter" href="https://x.com/"><i class="fa fa-twitter"></i></a>
                                <a title="Linkedin" href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
                                <a title="Youtube" href="https://shows.youtube.com/"><i class="fa fa-youtube"></i></a>
                                <a title="Vimeo" href="https://vimeo.zendesk.com/"><i class="fa fa-vimeo"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">联系我们</h2>
                            <ul class="contact-links">
                                <li><i class="pe-7s-home"></i> <span>山东省青岛市</span> </li>
                                <li><i class="pe-7s-mail"></i><a href="mailto:xujingjie2025@126.com"> xujingjie2025@126.com</a></li>
                                <li><i class="pe-7s-call"></i><a href="tel:+86-19854299760"> +86-19854299760</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget aos-init aos-animate">
                            <h2 class="widget-title">信息</h2>
                            <ul class="widget-list">
                                <li><a href="page/contact">条款&条件</a></li>
                                <li><a href="page/contact">支付方式</a></li>
                                <li><a href="page/contact">产品保修</a></li>
                                <li><a href="page/contact">退货流程</a></li>
                                <li><a href="page/contact">安全支付</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">订阅我们的邮件</h2>
                            <div class="widget-body">
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap pt-1">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box mb-4" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit" >订阅</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                                <p class="desc-content mb-0">加入1000多人的行列，每次我们发布时，他们都会自动获得免费和最新的内容</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-secondary pt-4 pb-4">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-center">
                        <div class="copyright-content">
                            <p class="mb-0">版权所有 &copy; 2025.Company name All. 版权所有</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->


    <!-- Modal Start  -->
    <div class="modalquickview modal fade" id="quick-view" tabindex="-1" aria-labelledby="quick-view" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="row">
                    <div class="col-md-6 col-12">

                        <!-- Product Details Image Start -->
                        <div class="modal-product-carousel">

                            <!-- Single Product Image Start -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="front/picture/110.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="front/picture/22.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="front/picture/32.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="front/picture/41.jpg" alt="Product">
                                    </a>
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" src="front/picture/51.jpg" alt="Product">
                                    </a>
                                </div>

                                <!-- Swiper Pagination Start -->
                                <!-- <div class="swiper-pagination d-md-none"></div> -->
                                <!-- Swiper Pagination End -->

                                <!-- Next Previous Button Start -->
                                <div class="swiper-product-button-next swiper-button-next"><i class="pe-7s-angle-right"></i></div>
                                <div class="swiper-product-button-prev swiper-button-prev"><i class="pe-7s-angle-left"></i></div>
                                <!-- Next Previous Button End -->
                            </div>
                            <!-- Single Product Image End -->

                        </div>
                        <!-- Product Details Image End -->

                    </div>
                    <div class="col-md-6 col-12 overflow-hidden position-relative">

                        <!-- Product Summery Start -->
                        <div class="product-summery position-relative">

                            <!-- Product Head Start -->
                            <div class="product-head mb-3">
                                <h2 class="product-title">Sample product title模态框</h2>
                            </div>
                            <!-- Product Head End -->

                            <!-- Rating Start -->
                            <span class="ratings justify-content-start mb-2">
                            <span class="rating-wrap">
                                <span class="star" style="width: 100%"></span>
                            </span>
                            <span class="rating-num">(4)</span>
                            </span>
                            <!-- Rating End -->

                            <!-- Price Box Start -->
                            <div class="price-box mb-2">
                                <span class="regular-price">$80.00</span>
                                <span class="old-price"><del>$90.00</del></span>
                            </div>
                            <!-- Price Box End -->

                            <!-- Description Start -->
                            <p class="desc-content mb-5">I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
                            <!-- Description End -->

                            <!-- Quantity Start -->
                            <div class="quantity d-flex align-items-center mb-5">
                                <span class="me-2"><strong>Qty: </strong></span>
                                <div class="cart-plus-minus">
                                    <input class="cart-plus-minus-box" value="1" type="text">
                                    <div class="dec qtybutton"></div>
                                    <div class="inc qtybutton"></div>
                                </div>
                            </div>
                            <!-- Quantity End -->

                            <!-- Cart Button Start -->
                            <div class="cart-btn mb-4">
                                <div class="add-to_cart">
                                    <a class="btn btn-dark btn-hover-primary" href="cart.html">Add to cart</a>
                                </div>
                            </div>
                            <!-- Cart Button End -->

                            <!-- Action Button Start -->
                            <div class="actions border-bottom mb-4 pb-4">
                                <a href="compare.html" title="Compare" class="action compare"><i class="pe-7s-refresh-2"></i> Compare</a>
                                <a href="wishlist.html" title="Wishlist" class="action wishlist"><i class="pe-7s-like"></i> Wishlist</a>
                            </div>
                            <!-- Action Button End -->

                            <!-- Social Shear Start -->
                            <div class="social-share">
                                <span><strong>Social: </strong></span>
                                <a href="#" class="facebook-color"><i class="fa fa-facebook"></i> Like</a>
                                <a href="#" class="twitter-color"><i class="fa fa-twitter"></i> Tweet</a>
                                <a href="#" class="pinterest-color"><i class="fa fa-pinterest"></i> Save</a>
                            </div>
                            <!-- Social Shear End -->

                            <!-- Payment Option Start -->
                            <div class="payment-option mt-4 d-flex">
                                <span><strong>Payment: </strong></span>
                                <a href="#">
                                    <img class="fit-image ms-1" src="front/picture/payment.png" alt="Payment Option Image">
                                </a>
                            </div>
                            <!-- Payment Option End -->

                            <!-- Product Delivery Policy Start -->
                            <ul class="product-delivery-policy border-top pt-4 mt-4 border-bottom pb-4">
                                <li> <i class="fa fa-check-square"></i> <span>Security Policy (Edit With Customer Reassurance Module)</span></li>
                                <li><i class="fa fa-truck"></i><span>Delivery Policy (Edit With Customer Reassurance Module)</span></li>
                                <li><i class="fa fa-refresh"></i><span>Return Policy (Edit With Customer Reassurance Module)</span></li>
                            </ul>
                            <!-- Product Delivery Policy End -->

                        </div>
                        <!-- Product Summery End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->

    <a href="#" class="scroll-top show" id="scroll-top">
        <i class="arrow-top pe-7s-angle-up-circle"></i>
        <i class="arrow-bottom pe-7s-angle-up-circle"></i>
    </a>

    <!-- Mobile Menu Start -->
    <div class="mobile-menu-wrapper">
        <div class="offcanvas-overlay"></div>

        <!-- Mobile Menu Inner Start -->
        <div class="mobile-menu-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="pe-7s-close"></i>
            </div>
            <!-- Button Close End -->

            <!-- Mobile Menu Inner Wrapper Start -->
            <div class="mobile-menu-inner-wrapper">
                <!-- Mobile Menu Search Box Start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                        <button class="search-btn"><i class="pe-7s-search"></i></button>
                    </form>
                </div>
                <!-- Mobile Menu Search Box End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                    <li><a href="index-3.html">Home Three</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="shop.html">Shop Grid</a></li>
                                    <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="cart.html">Shopping Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="single-product.html">Single Product</a></li>
                                    <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a href="single-product-group.html">Single Product Group</a></li>
                                    <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                    <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                    <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                    <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                    <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                    <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                    <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="error-404.html">Error 404</a></li>
                                    <li><a href="my-account.html">My Account</a></li>
                                    <li><a href="login.html">Loging | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr mb-6">
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <h4 class="title">Language:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">English</a></li>
                                <li><a class="dropdown-item" href="#">Japanese</a></li>
                                <li><a class="dropdown-item" href="#">Arabic</a></li>
                                <li><a class="dropdown-item" href="#">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <h4 class="title">Currency:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">USD</a></li>
                                <li><a class="dropdown-item" href="#">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto bottom-0">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner Wrapper End -->

        </div>
        <!-- Mobile Menu Inner End -->
    </div>
    <!-- Mobile Menu End -->

    <!-- Scripts -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->


    <script src="front/js/popper.min.js"></script>
    <script src="front/js/bootstrap.min.js"></script>
    <script src="front/js/jquery-3.6.0.min.js"></script>
    <script src="front/js/jquery-migrate-3.3.2.min.js"></script>
    <script src="front/js/modernizr-3.11.2.min.js"></script>



    <!-- Plugins JS -->


    <script src="front/js/aos.min.js"></script>
    <script src="front/js/jquery.ajaxchimp.min.js"></script>
    <script src="front/js/jquery-ui.min.js"></script>
    <script src="front/js/nice-select.min.js"></script>
    <script src="front/js/swiper-bundle.min.js"></script>
    <script src="front/js/countdown.min.js"></script>
    <script src="front/js/lightgallery-all.min.js"></script>



    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <!-- 
    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> 
    -->

    <!--Main JS-->
    <script src="front/js/main.js"></script>

    <script src="layui/layui.all.js"></script>

    <script  type="text/html" id="productitem">
        <div class="swiper-slide">
            <div class="product-wrapper">
                <div class="product mb-6">
                    <div class="thumb">
                        <input type="hidden" id="proid1" class="proid" value="productid">
                        <a href="single-product.html" class="image productimghref1">
                            <img id="productimg1" style="height: 315px;width: 260px;" class="first-image fit-image" src="front/picture/3.jpg" alt="Product"/>
                        </a>

                        <div class="actions">
                            <a class="action wishlist"><i class="pe-7s-like"></i></a>
                            <a href="#" class="action quickview" data-bs-toggle="modal"
                               data-bs-target="#quick-view"><i class="pe-7s-search"></i></a>
                        </div>
                        <div class="add-cart-btn">
                            <button class="btn btn-whited btn-hover-primary text-capitalize add-to-cart addcart">添加到
                                购物车
                            </button>
                        </div>
                    </div>
                    <div class="content">
                        <h5 class="title"><a id="productname1" href="single-product.html">Dinosaur Toys for Baby</a></h5>
                        <span class="price">
														<span id="productprice1" class="new">
															$12.50
														</span>
                                                </span>
                    </div>
                </div>
                <div class="product">
                    <div class="thumb">
                        <input type="hidden" id="proid2" class="proid" value="productid">
                        <a href="single-product.html" class="image productimghref2">
                            <img id="productimg2" style="height: 315px;width: 260px;" class="first-image fit-image" src="front/picture/4.jpg" alt="Product"/>
                        </a>

                        <div class="actions">
                            <a  class="action wishlist"><i class="pe-7s-like"></i></a>
                            <a href="#" class="action quickview" data-bs-toggle="modal"
                               data-bs-target="#quick-view"><i class="pe-7s-search"></i></a>
                        </div>
                        <div class="add-cart-btn">
                            <button class="btn btn-sm btn-whited btn-hover-primary text-capitalize add-to-cart addcart">添加到
                                购物车
                            </button>
                        </div>
                    </div>
                    <div class="content">
                        <h5 class="title"><a id="productname2" href="single-product.html">Mini Car Toy for Kids</a></h5>
                        <span class="price">
														<span id="productprice2" class="new">
															$28.50
														</span>
                                                </span>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/html" id="categoryitem">
        <li class="col-3">
            <h4 class="mega-menu-title">益智玩具</h4>
            <ul class="mb-n2">
                <li><a href="page/shoppage?cateid">积木</a></li>
                <li><a href="page/shopleft?cateid">拼图</a></li>
            </ul>
        </li>
    </script>

    <script type="text/html" id="productitems">
        <!-- Single Product List Start -->
        <div class="single-product-list mb-4">

            <!-- Product List Thumb Start -->
            <div class="product">
                <div class="thumb">
                    <a href="single-product.html" class="image proimghref">
                        <img style="width: 82px;height: 100px;" class="fit-image first-image proimg" src="front/picture/1.jpg" alt="Product Image">
                    </a>
                </div>
            </div>
            <!-- Product List Thumb End -->

            <!-- Product List Content Start -->
            <div class="product-list-content">
                <h6 class="product-name">
                    <a href="single-product.html" class="proname">Happy Kids With Gift</a>
                </h6>
                <span class="price">
                    <span class="new proprice">$12.50</span>
                    <span class="old prooldprice">$15.85</span>
                </span>
            </div>
            <!-- Product List Content End -->

        </div>
        <!-- Single Product List End -->
    </script>



    <script>
        const $ = layui.$;
        //商品生成块1
        $.ajax({
            url: 'product/list',
            success: function (result) {
                let data = result.data;
                for (let i = 0; i < data.length; i = i + 2) {
                    let item = $("#productitem").html();
                    let $item = $(item);

                    $item.find("#proid1").attr("value",data[i].proid);
                    $item.find("#productimg1").attr("src", data[i].defaultimage);
                    $item.find("#productname1").text(data[i].name);
                    $item.find("#productname1").attr('href','page/propage?proid='+data[i].proid);
                    $item.find("#productprice1").text(data[i].price);
                    $item.find('.productimghref1').attr('href','page/propage?proid='+data[i].proid);

                    $item.find("#proid2").attr("value",data[i+1].proid);
                    $item.find("#productimg2").attr("src", data[i+1].defaultimage);
                    $item.find("#productname2").text(data[i+1].name);
                    $item.find("#productname2").attr('href','page/propage?proid='+data[i+1].proid);
                    $item.find("#productprice2").text(data[i+1].price);
                    $item.find('.productimghref2').attr('href','page/propage?proid='+data[i+1].proid);


                    $("#productlist").append($item);
                }
            }
        });

        //商品生成块2
        $.ajax({
            url:'product/list',
            success: function (result) {
                let data = result.data;
                for (let i=0;i<5;i++){
                    let item = $("#productitems").html();
                    let $item = $(item);

                    $item.find(".proimghref").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proimg").attr("src",data[i].defaultimage);
                    $item.find(".proname").text(data[i].name);
                    $item.find(".proname").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proprice").text('$'+data[i].price);
                    $item.find(".prooldprice").text('$'+data[i].oldprice);
                    $("#productlist1").append($item);
                }
                for (let i=5;i<10;i++){
                    let item = $("#productitems").html();
                    let $item = $(item);

                    $item.find(".proimghref").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proimg").attr("src",data[i].defaultimage);
                    $item.find(".proname").text(data[i].name);
                    $item.find(".proname").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proprice").text('$'+data[i].price);
                    $item.find(".prooldprice").text('$'+data[i].oldprice);
                    $("#productlist2").append($item);
                }
                for (let i=10;i<15;i++){
                    let item = $("#productitems").html();
                    let $item = $(item);

                    $item.find(".proimghref").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proimg").attr("src",data[i].defaultimage);
                    $item.find(".proname").text(data[i].name);
                    $item.find(".proname").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proprice").text('$'+data[i].price);
                    $item.find(".prooldprice").text('$'+data[i].oldprice);
                    $("#productlist3").append($item);
                }
                for (let i=15;i<20;i++){
                    let item = $("#productitems").html();
                    let $item = $(item);

                    $item.find(".proimghref").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proimg").attr("src",data[i].defaultimage);
                    $item.find(".proname").text(data[i].name);
                    $item.find(".proname").attr("href",'page/propage?proid='+data[i].proid);
                    $item.find(".proprice").text('$'+data[i].price);
                    $item.find(".prooldprice").text('$'+data[i].oldprice);
                    $("#productlist4").append($item);
                }
            }
        });

        //商品分类的生成
        $.ajax({
            url: 'category/list',
            success: function(result){
                if(result.data!=null) {
                    console.log(result.data);
                    buildCategoryList(result.data);
                }
            }
        });
        function buildCategoryList(categories) {
            const container = $('#categorylist');

            categories.forEach(category => {
                if(category.parentid!=-1){
                    return;
                }
                console.log(category);
                // 创建外层li
                const li = $('<li>').addClass('col-3');

                // 添加标题
                const title = $('<h4>')
                    .addClass('mega-menu-title')
                    .text(category.name);

                // 创建子列表容器
                const subList = $('<ul>').addClass('mb-n2');

                $.ajax({
                    url:'category/getchildren',
                    data:{parentid:category.cateid},
                    async:false,
                    success:function(result){
                        // 填充子列表项
                        result.forEach(sub => {
                            subList.append(
                                $('<li>').append(
                                    $('<a>')
                                        .attr('href', 'page/shoppage?cateid='+sub.cateid)
                                        .text(sub.name)
                                )
                            );
                        });
                    }
                });
                // 组合元素
                li.append(title, subList);
                container.append(li);
            });
        }
        //搜索
        document.getElementById('search-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const query = document.querySelector('input[name="q"]').value;
            window.location.href = `page/shoppage?text=${encodeURIComponent(query)}`;
        });

        //加入购物车按钮绑定
        $('#productlist').on('click','.addcart',function(){
            const proId=Number($(this).closest('.product').find('.proid').val());
            $.ajax({
                url:'cart/get',
                success:function(result){
                    console.log(result);
                    if(result.code==401){
                        location.href='page/login';
                    }else if(result.length===0||!result.some(cart=>cart.proid===proId)){
                        $.ajax({
                            url: 'cart/add',
                            data: {proid: proId, quantity:1},
                            success: function() {
                                layer.msg("添加成功!");
                            }
                        });
                    }else{
                        layer.msg("该商品已在购物车中!")
                    }
                },
                error:function(){
                    console.error('发生错误:',error);

                }
            });
        });

        //加入收藏按钮绑定
        $('#productlist').on('click','.action.wishlist',function(){
            const proId=Number($(this).closest('.product').find('.proid').val());
            $.ajax({
                url:'collect/get',
                success:function(result){
                    console.log(result);
                    if(result.code==401){
                        location.href='page/login';
                    }
                    else if(result.length===0||!result.some(collect=>collect.proid===proId)){
                        $.ajax({
                            url: 'collect/add',
                            data: {proid:proId},
                            success: function() {
                                layer.msg("收藏成功!");
                            }
                        });
                    }else{
                        layer.msg("该商品已收藏!")
                    }
                },
                error:function(){
                    console.error('发生错误:',error);

                }
            });
        });
    </script>
</body>

</html>